// load 事件
// 在页面上的所有资源加载完毕之后执行
// 例如: 页面的图片、视频等
// let main = document.querySelector('.main')
// window.main.onload = waterfallFn;
waterfallFn();
window.onload = waterfallFn;

// resize 事件 监听切换窗口大小事件
// 监听窗口大小事件
window.onresize = waterfallFn;
// window.main.onresize = waterfallFn;

// 瀑布流函数
function waterfallFn() {
    let main = document.querySelector('.main');
    // 设定每个元素的间隙
    let space = 20;
    let boxList = document.querySelectorAll('.box');
    // 每个元素的宽度
    const boxWidth = boxList[0].offsetWidth + space;
    // 获取当前页面的列数 (一行能够容纳多少个元素)
    const colCount = Math.floor(main.offsetWidth / boxWidth);
    console.log(colCount);
    // 创建一个数组, 数组成员列数成员的高度
    let heightArr = new Array(colCount).fill(0); // [0,0,0]
    console.log(heightArr);
    // 遍历所有的元素, 比较他们的高度, 设置最小高度
    boxList.forEach((el) => {
        // todo 获取元素真实高度
        const h = el.offsetHeight;
        // todo 获取最小高度 (拿当前遍历的元素高度比较)
        // const minH = Math.min(...heightArr)
        // toSorted 新数组排序方法, 和sort功能一致, 区别是不会修改原数组
        //const minH = heightArr.toSorted((a, b) => a - b)[0];
        const minH = heightArr.reduce(
            (min, current) => (current < min ? current : min),
            heightArr[0]
        );
        // todo 把最小高度的值重置 (拿当前元素的高度 + 最小值的高度)
        // 获取最小值的下标
        const minIndex = heightArr.indexOf(minH);
        // todo 修改元素的位置
        // 一次性写入样式
        el.style.cssText = `
      position: absolute;
      top: ${minH}px;
      left: ${boxWidth * minIndex}px;
      `;
        // 修改最小高度的值 (累加)
        heightArr[minIndex] += h + space;
    });
    // boxList += boxList
    console.log(boxList);
}
